<template name="addvideoform3p">
    <div class="ui grid" style="max-width:600px;margin:auto;margin-top:10px;">
        <div class="ui form">
            <h1>Add a video from a third party url</h1>
            <p>
                Third party video providers is a great way to ensure that your video is watchable at highest qualities. It's never a bad thing to add a third party video source.
                <br /><br />If you want to share a non-original video on DTube, this is the recommended way, as it will reward the original creator registered on these third party websites.
                <br /><br />If you create original content, these solutions should not be your first choice as these platforms will most often force you to give them your personal data and/or put ads on top of your videos. Censorship or country restriction can also hurt the availability of your videos.
                <br /><br />
                <center>
                    {{#each providers}}
                        <div style="width: 32%; display: inline-block; margin-bottom: 15px">
                            <img style="width: 32%" src="./DTube_files/images/logos/{{logo}}">
                            <br />{{disp}}
                        </div>
                    {{/each}}
                </center>
                <h2>Enter a video URL: </h2>
            </p>
            <div class="ui form" id="uploadLinkForm">
                <div class="ui input" style='width: 100%'>
                    <input id="remotelink" type="text" name="url" placeholder="{{translate 'UPLOAD_LINK_PLACEHOLDER'}}" value="">              
                </div>
                {{#if searchedLink}}
                    <div class="preview">
                    {{#if tempContent}}
                        <div class="ui grid segment">
                        <div class="six wide column">
                            <div class="field segment">
                            <label>{{ translate 'UPLOAD_THUMBNAIL'}}</label>
                            <img width="100%" src='{{tempContent.thumbnailUrl}}' />
                            </div>
                            {{#if isOnMobile}}
                            <div class="ui centered grid">
                                <label for="snapFile" style="width:100%;">
                                    <a class="ui red fluid dtube icon right labeled button needsclick" id="uploadSnap">
                                    <div style="display:inline-block; padding:0.8em 1em;" class="needsclick">
                                        {{ translate 'UPLOAD_UPLOAD_SNAP'}}
                                    </div>
                                    <i class="cloud upload icon red" style="background:white; opacity:1;"></i>
                                    </a>
                                </label>
                                <input type="file" id="snapFile" style="display: none;">
                            </div>
                            {{else}}
                            <div>
                                <label for="snapFile">
                                    <a class="ui red dtube icon right labeled button" style=" margin-top:10px;" id="uploadSnap">
                                    <div style="display:inline-block; padding:0.8em 1em;">
                                        {{ translate 'UPLOAD_UPLOAD_SNAP'}}
                                    </div>
                                    <i class="cloud upload icon red" style="background:white; opacity:1;"></i>
                                    </a>
                                </label>
                                <input type="file" id="snapFile" style="display: none;">
                            </div>
                            {{/if}}
                        </div>
                        <div class="ten wide column">
                            {{> uploadform}}
                        </div>
                        </div>
                    {{else}}
                        <div class="ui active inverted dimmer">
                        <div class="ui text loader">Loading</div>
                        </div>
                    {{/if}}
                    </div>
                {{/if}}
            </div>
            <br />
            {{> addvideobuttonnext}}
            {{> addvideobuttonback}}
        </div>
    </div>
</template>